<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .denglu {
            width: 30%;
            height: 80%;
            margin: 50px auto;
            /* background-color: burlywood; */
        }
        
        h2 {
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        
        table {
            width: 100%;
            border: 1px solid grey;
            font-size: 17px;
            border-spacing: 0px;
        }
        
        td {
            height: 45px;
            border: 1px solid grey;
        }
        
        #label1,
        #label2 {
            float: right;
            cursor: pointer;
        }
        
        input {
            width: 240px;
            height: 27px;
            text-indent: 10px;
            margin-left: 5px;
        }
        
        #td3 {
            position: relative;
        }
        
        #autologin {
            width: 40px;
            height: 27px;
            position: absolute;
            left: 35%;
        }
        
        #label3 {
            margin-left: 190px;
        }
        
        button {
            width: 70px;
            height: 30px;
        }
    </style>
</head>

<body>


    <div class="denglu">
        <h2>账号登录</h2>
        <table>
            <tbody>
                <tr>
                    <td><label for="username" id="label1">用户名：</label></td>
                    <td><input type="text" id="username" placeholder="请输入用户名"></td>
                </tr>
                <tr>
                    <td><label for="password" id="label2">密码：</label></td>
                    <td><input type="password" id="password" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td colspan="2" id="td3"><input type="checkbox" id="autologin"><label for="autologin" id="label3">30天内免登陆</label></td>
                    <!-- <td></td> -->
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center;"><button id="login">立即登录</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="register.html">注册</a></td>
                    <!-- <td></td> -->
                </tr>
            </tbody>
        </table>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            let username = localStorage.getItem("username");
            let password = localStorage.getItem("password");
            if (username && password) {
                $("#username").val(username)
                $("#password").val(password)
                $("#login").click()
            }
        })


        $("#login").click(function() {
            let username = $("#username").val()
            let password = $("#password").val()

            if ((username && password)) {
                $.ajax({
                    url: "http://10.35.164.110:81/login",
                    data: {
                        username: username,
                        password: password
                    },
                    success(data) {
                        if (data === "success") {
                            alert("登录成功")
                            if ($("#autologin").prop("checked")) {
                                localStorage.setItem("username", username)
                                localStorage.setItem("password", password)
                            }
                            location.href = "http://10.35.164.110/25day-ly/index.html"
                        } else {
                            alert("用户名或密码错误")
                        }
                    }
                })
            } else {
                alert("输入错误")
            }
        })
    </script>

</body>

</html>